<template>
	<!-- 二级条件选择 -->
	<view class="x-f m-scroll-tag">
		<scroll-view scroll-x="true" style="flex: 1;" class="tow_scroll" :scroll-with-animation="true"
			:scroll-left="scrollLeft">
			<view class="scroll_container">
				<view class="scroll_tags" :style="[itemStyle, {
						color: current === index ? '#ffffff' : '#202020',
						background: current === index ? bgColor : '#F5F5F5'
					}]" v-for="(item, index) in tagsList" :key="index" @click="setTags(item, index)">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 右侧插槽 -->
		<view class="right-slot">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	// 定义标签项接口
	interface TagItem {
		name : string;
		[key : string] : any; // 允许其他属性
	}

	// 定义组件属性
	const props = defineProps<{
		tagsList : TagItem[];
		bgColor ?: string;
		itemStyle ?: Record<string, string | number>;
	}>();

	// 定义组件 emits
	const emit = defineEmits<{
		(e : 'tabChange', data : { data : TagItem; Index : number }) : void;
	}>();

	// 响应式变量
	const scrollLeft = ref(0);
	const current = ref(0);

	// 标签点击事件处理
	const setTags = (item : TagItem, index : number) => {
		current.value = index;

		let scrollLeftVal = index * 38;
		if (index <= 2) {
			scrollLeftVal = 0;
		}
		scrollLeft.value = scrollLeftVal;

		emit('tabChange', {
			data: item,
			Index: index
		});
	};
</script>

<style lang="scss" scoped>
	// 隐藏滚动条scrollbar
	.tow_scroll ::-webkit-scrollbar {
		display: none;
		background-color: transparent;
	}

	.tow_scroll {
		padding: 0px 10rpx;
		white-space: nowrap;
		overflow: hidden;
		position: relative;

		.scroll_container {
			display: inline-block;
			white-space: nowrap;

			.scroll_tags {
				display: inline-block;
				background-color: #FFF8F5;
				color: #202020;
				text-align: center;
				padding: 12rpx 30rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				margin: 0 10rpx;
			}
		}

		.right-slot {
			position: absolute;
			top: 0;
			right: 10rpx;
			display: inline-block;
		}
	}
</style>